<template>
    <div class="w750">
        <div class="submit-order" :class="themes.theme">
            <div class="submit-list">
                <div class="submit-con" style="margin-top: 0; border-radius: 0">
                    <!-- 单个退货退款模式 -->
                    <template v-if="!isMult">
                        <div class="pro-mes" style="border-top: 0">
                            <div class="pro-img">
                                <legend-image
                                    :pic="orderInfo.pic"
                                    :type="'wh'"
                                    :options="{ w: '80', h: '80' }"
                                    :class="'needsclick'"
                                    :isJD="orderInfo.prodSource == 'JD'"
                                />
                                <img src="@/assets/images/haitao-small.png" class="haitao" v-if="orderInfo.goodsType == 'overseas'" />
                            </div>
                            <div class="pro-name">
                                <a href="#" class="name">{{ orderInfo.prodName }}</a>
                                <div class="sku">{{ orderInfo.attribute }}</div>
                                <span class="price">
                                    ￥
                                    <em class="now">{{ Money(orderInfo.price)[0] }}</em>
                                    .{{ Money(orderInfo.price)[1] }}
                                </span>
                            </div>
                            <div class="pro-num" style="bottom: 11px">×{{ orderInfo.basketCount }}</div>
                        </div>
                    </template>
                    <!-- 批量退货退款模式 -->
                    <template v-else>
                        <div class="pro-mes" style="border-top: 0">
                            <div class="pro-img" v-for="(item, index) in orderInfo" :key="index" style="margin-right: 10px">
                                <legend-image
                                    :pic="item.pic"
                                    :type="'wh'"
                                    :options="{ w: '80', h: '80' }"
                                    :class="'needsclick'"
                                    :isJD="item.prodSource == 'JD'"
                                />
                                <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
                            </div>
                        </div>
                    </template>
                </div>
                <div class="checkedType">
                    <div class="onlyMoney" v-for="(item, index) in type" :key="index" @click="goApplyReturn(item.serviceType)">
                        <div class="txt">{{ item.serviceName }}</div>
                        <div class="des">{{ item.serviceDesc }}</div>
                        <div class="arr"><img src="../../../assets/images/arrow.png" alt="" /></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import legendImage from 'components/legendImage/legendImage'
import { myOrderItemDetail } from 'api/refunds'
import cash from 'utils/tool'
import { mapState } from 'vuex'
export default {
    components: {
        legendImage
    },
    data() {
        return {
            Money: cash, //价格转换
            orderId: '', //订单ID
            orderItemId: '', //订单项ID
            orderInfo: {}, //订单信息
            type: [], //售后服务类型
            isMult: false //是否批量退款
        }
    },
    created() {
        this.orderId = this.$route.query.orderId
        this.orderItemId = this.$route.query.orderItemId
        this.isMult = JSON.parse(this.$route.query.isMult)
        // //如果是单个退货退款 contant是一个对象 否则是数组
        const afterData = JSON.parse(sessionStorage.getItem('afterData'))
        this.type = afterData.serviceType
        this.orderInfo = afterData.orderInfo
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        goApplyReturn(type) {
            //如果是批量退货退款模式 进入选择退货商品页面
            if (this.isMult) {
                this.$router.push({
                    path: '/checkGoods',
                    query: {
                        orderId: this.orderId,
                        orderItemIds: this.orderItemId,
                        serviceType: type
                    }
                })
            } else {
                //否则进入售后申请页
                this.$router.push({
                    path: `/applyReturn`,
                    query: {
                        orderId: this.orderId,
                        orderItemId: this.orderItemId,
                        serviceType: type
                    }
                })
            }
        }
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>

<style src="../../../assets/css/return.css" scoped></style>
<style src="../../../assets/css/popup.css" scoped></style>
<style src="../../../assets/css/submit-order.css" scoped></style>
<style src="../../../assets/css/style/submit-order-style.css" scoped></style>
